<template>
  <view class="container">
    <view class="flex top_task_tabs">
      <view class="relative">
        <!-- <image class="i-avatar" mode="widthFix" src="../../static/avatar.png" /> -->
        <view style="position: absolute;top:0rpx;right:0rpx;">
          <up-badge :isDot="true" type="error"></up-badge>
        </view>
      </view>
      <view
        class="task_tabs_item"
        :class="{ 'task_tabs_item-active': currentTabsIndex == 0 }"
        @click="toggleTabs(0)"
        >部门任务</view
      >
      <view
        class="task_tabs_item"
        :class="{ 'task_tabs_item-active': currentTabsIndex == 1 }"
        @click="toggleTabs(1)"
        >个人任务</view
      >
    </view>
    <up-search placeholder="搜索" shape="round" v-model="keyword"></up-search>
    <view class="dropdown">
      <up-dropdown>
        <up-dropdown-item
          v-model="value1"
          title="任务模块"
          :options="options1"
        ></up-dropdown-item>
        <up-dropdown-item
          v-model="value1"
          title="任务时间"
          :options="options1"
        ></up-dropdown-item>
        <up-dropdown-item
          v-model="value2"
          title="任务状态"
          :options="options2"
        ></up-dropdown-item>
      </up-dropdown>
    </view>
    

    <view class="task_lists">
      <view class="flex justify-between">
        <view class="task_total">共计6条任务</view>
        <view class="flex task_label_box">
          <view class="label_item">核查任务</view>
          <view class="label_item-active">处置任务</view>
        </view>
      </view>
      <view class="extend_list">
        <view class="extend_item" v-for="(item,index) in 6" :key="index" @click="togoDetail(item)">
          <view class="extend_title">
            <view>
              啊实打实大苏打
              <text class="overdue">逾期</text>
            </view>
            <view class="task_state">待分拨</view>
          </view>
          <view class="flex">
            <text class="task_label">任务时间：</text>
            <text>212121-2121</text>
          </view>
          <view class="flex">
            <text class="task_label">任务板块：</text>
            <text>212121-2121</text>
          </view>
          <view class="flex">
            <text class="task_label">任务进度：</text>
            <view class="w100">
              <u-line-progress :percentage="30" activeColor="#ff0000"></u-line-progress>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
const list = ref(["未付款", "待评价"]);
let keyword = ref("");

let currentTabsIndex = ref(0);

const toggleTabs = (index) => {
  currentTabsIndex.value = index;
};

let value1 = ref(1);
let value2 = ref(2);
let options1 = ref([
  {
    label: "默认排序",
    value: 1,
  },
  {
    label: "距离优先",
    value: 2,
  },
  {
    label: "价格优先",
    value: 3,
  },
]);
let options2 = ref([
  {
    label: "去冰",
    value: 1,
  },
  {
    label: "加冰",
    value: 2,
  },
  {
    label: "价格优先",
    value: 3,
  },
]);

const togoDetail = (item) => {
  uni.redirectTo({
    url: '/pages/checkTask/info?id='+item
  })
};

</script>

<style scoped lang="scss">
.container {
  padding: 0 22rpx;
}
.i-avatar{
	width: 110rpx;
	height: 110rpx;
	display: flex;
	flex-grow: 0;
}
.top_task_tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10rpx;
  .task_tabs_item {
    width: 260px;
    text-align: center;
    font-size: 28rpx;
    color: #999999;
  }

  .task_tabs_item-active {
    position: relative;
    font-size: 28rpx;
    font-weight: 600;
    color: #2e90ec;

    &::before {
      content: "";
      position: absolute;
      top: 50rpx;
      left: 50%;
      width: 60rpx;
      bottom: 0;
      margin: 0 auto;
      border-bottom: 2px solid #2e90ec;
      transform: translate(-50%, 0%);
    }
  }
}
.task_lists {
  .task_total{
    font-weight: 400;
    font-size: 24rpx;
  }
  .extend_list {
    width: 702rpx;
    height: 218rpx;
   
    .extend_item {
      padding: 24rpx 20rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
      border-radius: 16rpx;
      margin-top: 20rpx;
      .task_label{
        display: flex;
        flex-shrink: 0;
        flex-grow: 0;
      }
      .extend_title {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .overdue {
          font-size: 18rpx;
          color: #ffffff;
          padding: 4rpx 6rpx;
          background: #e63472;
          border-radius: 8rpx;
          margin-left: 10rpx;
        }
        .task_state{
          font-weight: 400;
          font-size: 24rpx;
          color: #FF0000;
        }
      }
    }
  }
  .task_label_box {
    .label_item {
      // width: 104rpx;
      padding: 6rpx 18rpx;
      background: #e3e3e3;
      border-radius: 8rpx;
      font-weight: 600;
      font-size: 24rpx;
      color: #666666;
      &-active {
        padding: 6rpx 18rpx;
        background: #2e90ec;
        border-radius: 8rpx;
        color: #fff;
        font-weight: 600;
        font-size: 24rpx;
      }
    }
  }
}
</style>
